<template>
  <view class="container">
    <!-- 头像 -->
    <view class="user-avatar">
      <image :src="'data:image/jpeg;base64,' + base64" class="avatar" mode="aspectFill" />
    </view>

    <!-- 背景 -->
    <view class="bg">
      <view class="icon-box">
        <view class="icon-item">
          <image :src="images.icons.icon4" class="icon" />
          <view class="icon-text"> {{ props.result.rectangle.length?`色斑${props.result.rectangle.length}个`:'无色斑'}} </view>
        </view>
      </view>
    </view>

    <!-- 皮肤分析 -->
    <view class="skin-analysis">
      <view class="skin-type-tag">
        <image :src="images.icons.skinTitleBg" class="skin-type-bg" />
        <view class="skin-type-text">
          {{ skinResult?.resultClassification }}
        </view>
      </view>

      <view class="analysis-section">
        <view class="section-title">
          <image :src="images.icons.skinWenhao" class="question-icon" />
          <text>问题分析</text>
        </view>
        <view class="analysis-content">
          <view class="analysis-list">
            <text>{{ skinResult.problemAnalysis }}</text>
          </view>
        </view>
      </view>

      <view class="solution-section">
        <view class="section-title">
          <image :src="images.icons.skinLightIcon" class="solution-icon" />
          <text>解决方案</text>
        </view>
        <view class="solution-content">
          <view class="solution-items">
            <view class="solution-item">
              <image :src="images.icons.iconC1" class="item-icon" />
            </view>
            <view class="solution-item">
              <image :src="images.icons.iconC2" class="item-icon" />
            </view>
            <view class="solution-item">
              <image :src="images.icons.iconC3" class="item-icon" />
            </view>
          </view>
          <view class="solution-text">
            <view class="solution-list">
              <text>{{ skinResult.improvementSuggestions }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { DEFAULT_IMAGE, images } from '@/config/images';

const props = defineProps({
  result: {
    type: Object,
    default: () => ({})
  },
  base64: {
    type: String,
    default: ''
  }
});

const skinResult = ref(uni.getStorageSync('cnResult').pigmentation)

const getSkinTypeText = () => {
  switch (props.result?.skin_type) {
    case 0: return '油性肤质';
    case 1: return '干性肤质';
    case 2: return '中性肤质';
    case 3: return '混合性肤质';
    default: return '未知肤质';
  }
}

console.log(111, props.result)
</script>


<style lang="scss" scoped>
.container {
  width: 100vw;
  background: #F3F3FD;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  overflow: hidden;

  .user-avatar {
    width: 384rpx;
    height: 384rpx;
    margin: 27rpx auto 0;

    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }
  }

  .bg {
    width: 706rpx;
    height: 359rpx;
    background: linear-gradient(180deg, rgba(105, 105, 255, 0.2), rgba(105, 105, 255, 0));
    border-radius: 37rpx;
    position: absolute;
    top: 210rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;

    .icon-box {
      width: 100%;
      height: 96rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 238rpx;

      .icon-item {
        width: 164rpx;
        font-weight: bold;
        font-size: 32rpx;
        color: #222222;
        display: flex;
        flex-direction: column;
        align-items: center;

        .icon {
          width: 78rpx;
          height: 64rpx;
        }
      }
    }
  }
}

.skin-analysis {
  width: 706rpx;
  background: #FFFFFF;
  border-radius: 37rpx;
  margin: 187rpx auto 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .skin-type-tag {
    padding: 0 20rpx;
    height: 74rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: -9rpx;
    margin-top: -21rpx;
    font-weight: bold;
    font-size: 34rpx;
    color: #FFFFFF;

    .skin-type-bg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
    }

    .skin-type-text {
      z-index: 9;
      margin-top: -14rpx;
    }
  }

  .analysis-section,
  .solution-section {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 32rpx;

    .section-title {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      image {
        width: 33rpx;
        height: 33rpx;
        margin-right: 12rpx;
      }

      text {
        font-weight: bold;
        font-size: 30rpx;
        color: #222222;
      }
    }
  }
  .solution-section{
    margin-bottom: 60rpx;
  }

  .analysis-content,
  .solution-content {
    color: #666666;
    font-size: 28rpx;
    line-height: 1.6;
    margin-top: 24rpx;

    .analysis-list,
    .solution-list {
      margin-top: 16rpx;

      text {
        display: block;
        margin-bottom: 16rpx;
      }
    }
  }

  .solution-items {
    display: flex;
    justify-content: space-around;
    margin: 32rpx 0;

    .solution-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 107rpx;
        height: 107rpx;
      }

      text {
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
}
</style>